<template>
  <div class="app-container">
    <div class="page-pres-title">
      <span class="title-info">处方单审核</span>
      <span class="title-line">|</span>
      <span class="title-info">{{ detailData.patientCode }}</span>
      <span class="title-line">|</span>
      <span class="title-info">{{ detailData.encounterId }}</span>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="就诊信息" name="encounterInfo">
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">就诊号</div>
            <div class="item-info">{{ detailData.encounterId || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-sm">
            <div class="item-label item-label-md">医生</div>
            <div class="item-info">{{ detailData.doctorName || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">建立日期</div>
            <div class="item-info">{{ parseTime(detailData.diagnoseCreatedAt) || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">最后更新时间</div>
            <div v-bind:class="'item-info ' + renderTimeClass()">{{ parseTime(detailData.synTime) || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">最后审核时间</div>
            <div v-bind:class="'item-info ' + renderTimeClass()">{{ parseTime(detailData.auditorTime) || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">最后审核人</div>
            <div class="item-info">{{ detailData.auditorName || 'N/A' }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">开单诊所</div>
            <div class="item-info">{{ detailData.deptName || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-sm">
            <div class="item-label item-label-md">审核状态</div>
            <div v-bind:class="'item-info ' + renderStatusClass()">{{ handleAuditStatus(detailData.auditStatus) }}</div>
          </div>
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">是否配药</div>
            <div  v-bind:class="'item-info ' + renderStatusClass()">{{ handleIsEquip(detailData.isEquip) }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">是否发药</div>
            <div  v-bind:class="'item-info ' + renderStatusClass()">{{ handleIsSend(detailData.isSend) }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">是否结账</div>
            <div class="item-info">{{ handleIsBill(detailData.isBill) }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">是否需要审核</div>
            <div class="item-info">{{ handleIsAudit(detailData.isAudit) }}</div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="病案信息" name="patientInfo">
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">病案号</div>
            <div class="item-info">{{ detailData.patientCode || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-sm">
            <div class="item-label item-label-md">顾客姓名</div>
            <div class="item-info">{{ detailData.patientName || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-md">性别</div>
            <div class="item-info">{{ handleGender(detailData.gender) || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">出生日期</div>
            <div class="item-info">{{ parseTime(detailData.dob) || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-xl">年龄/身高/体重</div>
            <div class="item-info">{{ detailData.age || 'N/A' }} / {{ detailData.height || 'N/A' }} / {{ detailData.weight || 'N/A' }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-lg">体温(摄氏度)</div>
            <div class="item-info">{{ detailData.temperature || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-sm">
            <div class="item-label item-label-md">血压BP</div>
            <div class="item-info">{{ detailData.bp || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-md">
            <div class="item-label item-label-lg">脉搏(bmp)</div>
            <div class="item-info">{{ detailData.bmp || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">呼吸</div>
            <div class="item-info">{{ detailData.breathe || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-xl">血氧饱和度</div>
            <div class="item-info">{{ detailData.bloodOxygen || 'N/A' }}</div>
          </div>
          <div class="mod-details-item mod-details-item-lg">
            <div class="item-label item-label-lg">末次月经</div>
            <div class="item-info">{{ detailData.lastMenstruation || 'N/A' }}</div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="过敏信息和其他注意事项" name="allergyInfo">
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-md">药物过敏</div>
            <div class="item-info item-info-error">{{ detailData.drugAllergy }}</div>
          </div>
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-lg">食物过敏</div>
            <div class="item-info item-info-error">{{ detailData.foodAllergy }}</div>
          </div>
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-xl">非药物过敏</div>
            <div class="item-info item-info-error">{{ detailData.undrugAllergy }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item">
            <div class="item-label item-label-md">警示</div>
            <div class="item-info item-info-error">{{ detailData.alertMark }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item">
            <div class="item-label item-label-md">皮试结果</div>
            <div class="item-info item-info-error">{{ detailData.skinTest }}</div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="病例" name="medicalBg">
        <div class="mod-details-wrap">
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-md">主诉</div>
            <div class="item-info item-info-error">{{ detailData.subjective }}</div>
          </div>
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-lg">体格检查</div>
            <div class="item-info item-info-error">{{ detailData.assessment }}</div>
          </div>
          <div class="mod-details-item mod-details-item-col3">
            <div class="item-label item-label-xl">病史</div>
            <div class="item-info item-info-error">{{ detailData.medicalBg }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item">
            <div class="item-label item-label-md">建议</div>
            <div class="item-info item-info-error">{{ detailData.plans }}</div>
          </div>
        </div>
        <div class="mod-details-wrap">
          <div class="mod-details-item">
            <div class="item-label item-label-md">备注</div>
            <div class="item-info item-info-error">{{ detailData.remarks }}</div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="医生诊断" name="diagnoseContent">
        <div class="font-color-primary">{{ detailData.diagnoseContent }}</div>
      </el-collapse-item>
      <el-collapse-item title="处方明细" name="diagnoseDetail">
        <div class="diagnose-table-wrap">
          <el-table
            :data="diagnoseTableData"
            style="width: 100%"
            default-expand-all
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="diagnose-extend-item">
                  <div class="item-label">注意事项</div>
                  <div class="item-info">{{ props.row.note }}</div>
                </div>
                <div class="diagnose-extend-item">
                  <div class="item-label">中文备注</div>
                  <div class="item-info">{{ props.row.mark }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="RX" prop="rx" />
            <el-table-column label="药名(Item)" prop="materialName" class-name="font-primary-color font-primary-weight" />
            <el-table-column label="剂量(Intake+unit)" prop="intakeUnit" class-name="font-primary-color" />
            <el-table-column label="频率" prop="intakeMethod" class-name="font-primary-color" />
            <el-table-column label="用药时间" prop="medicationTime" class-name="font-primary-color" />
            <el-table-column label="数量" prop="qty" class-name="font-primary-color" />
            <el-table-column label="单位" prop="qtyUnitName" class-name="font-primary-color" />
            <el-table-column label="说明" prop="instructions" class-name="font-primary-color" />
            <!-- <el-table-column label="备注" prop="remarks" class-name="font-primary-color" /> -->
          </el-table>
        </div>
        <div class="diagnose-table-opt">
          <div class="opt-item-input">
            <el-input
              v-model="detailData.auditContent"
              placeholder="审核备注(药师填写)"
              :rows="5"
              resize="none"
              type="textarea"
              :disabled="detailData.auditStatus === 2 || detailData.auditStatus === 4"
            />
          </div>
          <div class="opt-item-btn">
            <el-button
              type="info"
              size="mini"
              :loading="checkBtnLoading"
              :disabled="detailData.auditStatus === 2 || detailData.auditStatus === 4"
              @click="handleStatus(4)"
            >无需审核</el-button>
          </div>
          <div class="opt-item-btn">
            <el-button
              type="danger"
              size="mini"
              :loading="checkBtnLoading"
              :disabled="detailData.auditStatus === 2 || detailData.auditStatus === 4"
              @click="handleStatus(2)"
            >审核不通过</el-button>
          </div>
          <div class="opt-item-btn">
            <el-button
              type="success"
              size="mini"
              :loading="checkBtnLoading"
              :disabled="detailData.auditStatus === 2 || detailData.auditStatus === 4"
              @click="handleStatus(1)"
            >审核通过</el-button>
          </div>
          <div class="opt-item-btn">
            <el-button
              type="primary"
              size="mini"
              @click="handleNextPage"
            >下一张</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getHead, auditHead, getNextAuditId } from "@/api/order/head"
import { diagnoseDetail } from "@/api/order/detail"

export default {
  name: "Detail",
  data() {
    return {
      // 折叠面板默认展开的值
      activeNames: ['encounterInfo', 'patientInfo', 'allergyInfo', 'diagnoseContent', 'diagnoseDetail', 'medicalBg'],
      // 处方列表数据
      diagnoseTableData: null,
      // 下一张待审核处方ID
      nextAuditId: null,
      checkBtnLoading: false,
      detailData: {
        encounterId: undefined,
        diagnoseId: undefined,
        diagnoseCreatedAt: undefined,
        deptCode: undefined,
        deptName: undefined,
        doctorCode: undefined,
        doctorName: undefined,
        patientCode: undefined,
        patientName: undefined,
        gender: undefined,
        dob: undefined,
        auditorId: undefined,
        auditorName: undefined,
        auditorTime: undefined,
        auditStatus: undefined,
        isAudit: undefined,
        auditContent: undefined,
        isEquip: undefined,
        isSend: undefined,
        isBill: undefined,
        age: undefined,
        height: undefined,
        weight: undefined,
        temperature: undefined,
        bp: undefined,
        bmp: undefined,
        breathe: undefined,
        bloodOxygen: undefined,
        lastMenstruation: undefined,
        drugAllergy: undefined,
        foodAllergy: undefined,
        undrugAllergy: undefined,
        alertMark: undefined,
        medicalBg: undefined,
        ext: undefined,
        diagnoseContent: undefined,
        isValid: undefined,
        synTime: undefined,
        skinTest: undefined,
        subjective: undefined,
        assessment: undefined,
        plans: undefined,
        remarks: undefined,
      },
      loading: false
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      const id = this.$route.params.id;
      this.loading = true;

      getHead(id).then(response => {
        this.detailData = response.data;

        // 获取处方列表
        diagnoseDetail(this.detailData.diagnoseId).then(resp => {
          this.diagnoseTableData = resp.data;
          this.loading = false;
        })

        // 获取下一张处方ID
        getNextAuditId(this.$route.params.id).then(resp => {
          this.nextAuditId = resp.data;
        }).catch(error => {
          this.nextAuditId = null;
        })
      });
    },
    // 渲染时间是否标红
    renderTimeClass() {
      if (new Date(this.detailData.auditorTime) <= new Date(this.detailData.synTime)) {
        return 'font-error-color';
      }

      return '';
    },
    // 渲染是否配药，是否发药标红
    renderStatusClass() {
      const {isEquip, isSend, auditStatus} = this.detailData;

      if(auditStatus !== 1 && isSend !== 0) {
        return 'font-error-color';
      }

      if(auditStatus !== 1 && isEquip !== 0) {
        return 'font-error-color';
      }

      if(isSend === 3 || isEquip === 3) { // 超发
        return 'font-error-color';
      }

      if(auditStatus === 3) {
        return 'font-error-color';
      }

      return '';
    },
    // 处理结账信息
    handleIsBill(isBill) {
      let str = 'N/A';

      switch(isBill) {
        case 0:
          str = '否';
        break;
        case 1:
          str = '是';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 处理是否发药
    handleIsSend(isSend) {
      let str = 'N/A';

      switch(isSend) {
        case 0:
          str = '否';
        break;
        case 1:
          str = '是';
        break;
        case 2:
          str = '部分发';
        break;
        case 3:
          str = '超发';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 处理是否配药
    handleIsEquip(isEquip) {
      let str = 'N/A';

      switch(isEquip) {
        case 0:
          str = '否';
        break;
        case 1:
          str = '是';
        break;
        case 2:
          str = '部分配';
        break;
        case 3:
          str = '超配';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 处理审核状态
    handleAuditStatus(auditStatus) {
      let str = 'N/A';

      switch(auditStatus) {
        case 0:
          str = '未审核';
        break;
        case 1:
          str = '审核通过';
        break;
        case 2:
          str = '审核未通过';
        break;
        case 3:
          str = '重新审核';
        break;
        case 4:
          str = '无需审核';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 处理是否需要审核
    handleIsAudit(isAudit) {
      let str = 'N/A';

      switch(isAudit) {
        case 0:
          str = '否';
        break;
        case 1:
          str = '是';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 处理性别
    handleGender(gender) {
      let str = 'N/A';

      switch(gender) {
        case 1:
          str = '男';
        break;
        case 2:
          str = '女';
        break;
        case 3:
          str = '未知';
        break;
        default:
          str = 'N/A';
      }

      return str;
    },
    // 审核下一张处方
    handleNextPage() {
      if(this.nextAuditId) {
        this.$router.replace(`/order/detail/${this.nextAuditId}`);
        // this.$nextTick(() => {
        //   this.$router.replace({
        //     path: `/order/detail/${this.nextAuditId}`
        //   })
        // })
        // window.location.href = `/order/detail/${this.nextAuditId}`
      } else {
        this.$message.info('没有待审核处方');
      }
    },
    // 审核按钮方法
    handleStatus(status) {
      this.checkBtnLoading = true;

      auditHead({
        id: this.$route.params.id,
        auditStatus: status,
        auditContent: this.detailData.auditContent
      }).then(resp => {
        this.checkBtnLoading = false;

        this.$message({
          message: '药品审核成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            // 审核完成原页面刷新数据
            this.getDetail();
          }
        })
      }).catch(error => {
        this.checkBtnLoading = false;
        this.$message.error('审核提交失败，请稍后重试');
      })
    }
  }
};
</script>

<style lang="scss" scoped>
  .page-pres-title {
    margin-bottom: 15px;
    font-size: 13px;
    color: #3e7e90;
    .title-line {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
  .mod-details-wrap {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .mod-details-item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .mod-details-item {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    &.mod-details-item-sm {
      width: 150px;
    }
    &.mod-details-item-md {
      width: 200px;
    }
    &.mod-details-item-lg {
      width: 265px;
    }
    &.mod-details-item-col3 {
      width: 30%;
    }
    .item-label {
      float: left;
      font-size: 12px;
      color: #333;
      font-weight: bold;
      &.item-label-lg {
        width: 85px;
      }
      &.item-label-md {
        width: 60px;
      }
      &.item-label-xl {
        width: 95px;
      }
      &.item-label-5 {
        width: 80px;
      }
    }
    .item-info {
      overflow: hidden;
      font-size: 12px;
      color: #0018a1;
      line-height: 22px;
      &.item-info-error {
        font-weight: bold;
        color: #eb2323;
      }
    }
  }
  .diagnose-extend-item {
    overflow: hidden;
    margin-top: 5px;
    &:first-child {
      margin-top: 0;
    }
    .item-label {
      float: left;
      font-size: 14px;
      font-weight: bold;
      margin-right: 10px;
      color: #333;
    }
    .item-info {
      overflow: hidden;
      font-size: 14px;
      color: #0018a1;
    }
  }
  .diagnose-table-wrap {
    margin-bottom: 25px;
  }
  .diagnose-table-opt {
    .opt-item-input {
      display: inline-block;
      width: 500px;
      margin-right: 30px;
      vertical-align: top;
    }
    .opt-item-btn {
      display: inline-block;
      margin-right: 30px;
      vertical-align: top;
    }
  }
</style>

<style>
  .el-table td.font-primary-color .cell {
    color: #0018a1;
  }
  .el-table td.font-primary-weight .cell {
    font-weight: bold;
  }
  .font-color-primary {
    color: #0018a1;
  }
</style>
